<template>
	<div>
		<el-form label-position="right" label-width="80px" :model="ruleForm" status-icon :rules="rules" ref="ruleForm">
			<el-form-item label="用户名" prop="email">
				<el-input type="text" v-model="ruleForm.email" autocomplete="off" placeholder="请输入邮箱"></el-input>
			</el-form-item>
			<el-form-item label="密码" prop="password">
				<el-input type="password" v-model="ruleForm.password" autocomplete="off" placeholder="请输入密码" show-password></el-input>
			</el-form-item>
			<el-form-item style="text-align: center;margin-top: 40px;">
				<el-button style="width: 100%;" type="primary" @click="signup('ruleForm')">确认注册</el-button>
			</el-form-item>
		</el-form>
		<div class="signin-footer">
			<text @click="signin" style="color:#409EFF;" title="已有账号">已有账号</text>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			let validatePass = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请输入密码'));
				} else if (!/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,16}$/.test(value)) {
					callback(new Error('密码格式为(必须包含大小写字母和数字的组合，不能使用特殊字符，长度在8-10之间)'));
				} else {
					callback();
				}
			};
			return {
				ruleForm: {
					password: '',
					email: ''
				},
				rules: {
					password: [{
						required: true,
						validator: validatePass,
						trigger: ['blur']
					}, ],
					email: [{
							required: true,
							message: '请输入邮箱地址',
							trigger: 'blur'
						},
						{
							type: 'email',
							message: '请输入正确的邮箱地址',
							trigger: ['blur']
						}
					]
				}
			};
		},
		methods: {
			signin(){
				this.$router.push('/users/signin');
			},
			signup(formName) {
				this.$refs[formName].validate( async (valid) => {
					if (valid) {
						let res = await this.$network({
							api:"signup",
							data:{
								password:this.ruleForm.password,
								email:this.ruleForm.email
							}
						})
						
						if(res.status === 0){
							this.$message({
								message: '注册成功，请前往登录！',
								type: 'success',
								duration:2000
							});
							setTimeout(()=>{
								this.$router.push('/users/signin');
							},2000)
						}
						this.ruleForm.password = "";
						this.ruleForm.email = "";
					} else {
						return false;
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.signin-footer{
		cursor: pointer;
		font-weight: bold;
		text-align: right;
		font-size: $uni-font-size-extra-sm;
		color: $uni-color-error;
		text{
			margin-right: 20px;
		}
	}
</style>
